import React, { Component } from 'react'
import { NavBar, Icon } from "antd-mobile";
import tu from "../../assets/images/header_o.jpg"
import "./personal.scss"
export default class Personal extends Component {

  handleToprofile = (params) => {
    this.props.history.push("/profile/")
   
  }
  state = {
    token: {},
    isLogin: false,
    endearment: "无昵称用户",
    personalInfo:{}
  }
  componentDidMount() {
    // 获取localStorage中token
    let loginToken = JSON.parse(localStorage.getItem("loginToken"))
    this.setState({
      token : loginToken
    })
    // 判断token值是否存在
    if (loginToken) {
      this.setState({
        isLogin: true,
      });
    }
    let personalInfo=JSON.parse(localStorage.getItem("personalInfo"))
    
    this.setState({
      personalInfo
    })
  }

  render() {
    return (
      <div className="dang-my-personal">
        {/* 我的导航条开始 */}
        <div className="dang-my-nav">
          <NavBar
            className="dang-my-header"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            rightContent={[
              <Icon key="1" type="ellipsis" />,
            ]}
          >个人中心</NavBar>
        </div>
        {/* 导航条结束 */}
        {/* 个人信息开始 */}
        <div className="personal-my">
          <div className="peraonal-info">
            <img src={tu} alt=""></img>
            <h1 className="endearment">{this.state.personalInfo?this.state.personalInfo.endearment:this.state.endearment}</h1>
            <span className="notice">关注0 | 粉丝0</span>
            <p className="introduce">简介：这位书友正在书海畅游,还没有编辑个人介绍</p>
            <em className="information" onClick={this.handleToprofile}>编辑个人资料</em>
          </div>
        </div>
        {/* 个人信息结束 */}
        {/* 出书开始 */}
        <div className="personal-my-book">
          <div className="personal-item">
            <div className="personal-top">我要出书</div>
            <div className="personal-bottom">我关注的作品</div>
          </div>
        </div>
        {/* 出书结束 */}
        <div className="personal-my-discuss">
          <div className="personal-item">
            <div className="personal-top">短书评(0)</div>
            <div className="personal-bottom">
              还没有短书评，收货后评论或者直接在<br />图书商品发表吧
            </div>
          </div>
        </div>

        <div className="personal-my-long">
          <div className="personal-item">
            <div className="personal-top">长书评(0)</div>
            <div className="personal-bottom">
              还没有长书评，图书商品页面开源发表评论<br />哦
            </div>
          </div>
        </div>

        <div className="personal-my-booklist">
          <div className="personal-item">
            <div className="personal-top">书单(0)</div>
            <div className="personal-bottom">
              还没有书单，快去写一个
            </div>
          </div>
        </div>


        <div className="personal-my-footer">
          <p className="footer-copyright">
            申请成为书评人或者组建书评团<br />
          请联系ddshequ@dangdang.com
          </p>
        </div>

      </div>
    )
  }
}
